<template>
    <!-- <div class="modal" :class="{'is-active':isShow}"> -->
    <div class="modal is-active" v-if="isShow">
        <div @click="handleClose(2)" class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <slot name="title"></slot>
                <p v-if="!$slots.title" class="modal-card-title">{{title}}</p>
                <button class="delete" aria-label="close" @click="handleClose(0)"></button>
            </header>
            <section class="modal-card-body">
                <slot></slot>
            </section>
            <footer class="modal-card-foot">
                <slot name="footer"></slot>
                <template v-if="!$slots.footer">
                    <x-button type="success" :icon="icon" :disabled="disabled" @click="handleClose(1)">确定</x-button>
                    <x-button @click="handleClose(0)">取消</x-button>
                </template>
            </footer>
        </div>
    </div>
</template>
<script>
export default {
  name: "xModal",
  props: {
    title: [String, Number],
    isShow: Boolean,
    beforeClose: Function, //不把beforeClose作为自定义方法来触发的原因是需要自己通过调用回调来控制关闭
    isAsync: Boolean //异步关闭
  },
  data() {
    return {
      closeType: 0,
      disabled: false,
      icon: ""
      //isHandleClose: false //是否是被handleClose触发关闭的
    };
  },
  computed: {
    action() {
      return this.closeType === 1 ? "confirm" : "cancel"; //0,1,2
    }
  },
  methods: {
    handleClose(val) {
      this.closeType = val;
      if ({}.toString.call(this.beforeClose) === "[object Function]") {
        this.beforeClose(this.action, this, this.closeModal); //返回是确认还是取消，自身，关闭方法
        if (this.isAsync) {
          this.icon = "circle-o-notch spin fw";
          this.disabled = true;
        }
      } else {
        this.closeModal();
      }
    },
    closeModal() {
      this.$emit("update:isShow", false);
      if (this.isAsync) {
        this.icon = "";
        this.disabled = false;
      }
    }
  },
  watch: {
    isShow(val) {
      //触发父级事件
      val ? this.$emit("open") : this.$emit("close", this.action);
    }
  }
};
</script>